<template>
    <div class="mailpane">
        <el-container style="height: 100%">
            <el-header>
                <span class="toolbars-item"><el-icon><Refresh /></el-icon></span>
                <span class="toolbars-item"  @click="handleNewMail()"><el-icon><Edit /></el-icon></span>
                <span class="toolbars-item"><el-icon><Delete /></el-icon></span>
                <span class="toolbars-item"><el-icon><Position /></el-icon></span>
                <span class="toolbars-item"><el-icon><Right /></el-icon></span>
                <span class="toolbars-item"><el-icon><Search /></el-icon></span>
            </el-header>
            <el-container>
                <el-main>
                    <el-container class="mian">
                        <el-aside class="left hidden-xs-only">
                            <el-scrollbar>
                                <ul class="mailpane-list">
                                    <li v-for="item in items" :key="item.name">
                                        <div class="mailpane-list-item">
                                            <img :src="item.icon" alt="" class="mailpane-list-icon"/>
                                            <div class="mailpane-item-right">
                                                <h4>{{item.name}}</h4>
                                                <h4>{{item.content}}</h4>
                                                <div class="mailpane-list-tip">
                                                    <h5>{{item.text}}</h5>
                                                    <h5>{{item.time}}</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </li>  
                                </ul>
                            </el-scrollbar>
                        </el-aside>
                        <el-main class="main-content">
                            <el-scrollbar class="main-content-scrollbar">
                                <router-view />
                            </el-scrollbar>
                        </el-main>
                    </el-container>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <sc-contextmenu ref="contextmenu" @command="handleCommand" @visible-change="visibleChange">
        <sc-contextmenu-item command="新建文件夹" title="新建文件夹" suffix="Alt+N"></sc-contextmenu-item>
        <sc-contextmenu-item command="重新加载" title="重新加载(R)" suffix="Ctrl+R" icon="el-icon-refresh">
        </sc-contextmenu-item>
        <sc-contextmenu-item command="全部标记已读" title="全部标记已读" divided :disabled="row&&row.state==0">
        </sc-contextmenu-item>
        <sc-contextmenu-item command="删除全部" title="删除全部" disabled></sc-contextmenu-item>
        <sc-contextmenu-item title="高级" divided>
            <sc-contextmenu-item command="置顶" title="置顶"></sc-contextmenu-item>
            <sc-contextmenu-item title="移入">
                <sc-contextmenu-item command="收件箱" title="收件箱"></sc-contextmenu-item>
                <sc-contextmenu-item command="已删除" title="已删除"></sc-contextmenu-item>
                <sc-contextmenu-item command="垃圾箱" title="垃圾箱"></sc-contextmenu-item>
            </sc-contextmenu-item>
            <sc-contextmenu-item command="隐藏" title="隐藏"></sc-contextmenu-item>
        </sc-contextmenu-item>
    </sc-contextmenu>
</template>

<!-- Composition API -->
<script>
    import { toRefs, reactive, ref, watch, onUpdated } from "vue";
    import { getCurrentInstance, onMounted } from "vue";
    import scContextmenu from '@/components/contextmenu'
    import scContextmenuItem from '@/components/contextmenu/item'
    // import sendEmail from '../components/sendemail.vue'
    import Sortable from 'sortablejs'
    import { ElMessage } from "element-plus";
    import { useRouter } from "vue-router";

    
    // 常见的中文姓氏列表  
    const surnames = ['zhangsan', 'lisi', 'smith', 'liuergou', 'chenxiazi', 'yangzizou', 'zhaodousw', 'jakgads', 'wuxiaofda', 'xinlaing'];  
    // 常见的中文名字列表  
    const names = ['@qq.com', '@163.com', '@126.com', '@189.com', '@net.com', '@mall.com', '@342.com', '@12312.com', '@qweqw.com', '@weqwe.com'];  
    
    // 生成随机中文姓名的函数  
    function generateRandomName() {
        const randomSurname = surnames[Math.floor(Math.random() * surnames.length)];  
        const randomName = names[Math.floor(Math.random() * names.length)];  
        return randomSurname + randomName;
    }  

    const msgs = ["今晚出来聚餐...", "周末加班...", "不说了，说多了都是泪...", "哦哦，好的，3Q", "第一个不加不行啊", "好的",
                "这个估计当时没看具体逻辑...", "https://gitee.com/hudejie/wecom-copy...", "好", "8.1.3  8.1.4", "[图片]"
                , "非法参数1005", "回来的吧", "ok", "四楼来拿", "我一直没弄", "web正常显示的"]; 

    function generateRandomMsg() {  
        return msgs[Math.floor(Math.random() * msgs.length)];  
    }  

    const times = ["16:34", "08:21", "10:45", "18:57", "01:21", "17:44",
                    "昨天", "32分钟前", "星期一", "星期二", "星期三"
                , "星期四", "星期五", "星期六", "星期天", "5/21", "3/12", "2012/4/21", "刚刚"]; 

    function generateRandomTime() {  
        return times[Math.floor(Math.random() * times.length)];  
    }  

    const icons = ["haha.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]
    function generateRandomIcon() {  
        return icons[Math.floor(Math.random() * icons.length)];  
    }  

    export default {
        name: "MailPane",
        components: {
            scContextmenu,
            scContextmenuItem,
            // sendEmail
        },
        setup() {
            const data = reactive({
                asideOpen: true,
                activeIndex: 1.1,
                activeMailIndex: 1,
                hoverMailIndex: 1,
                value: null,
                loading: false,
                openeds: [1, 2],
                items:[],
                navlist: [
                    {
                        index: 1,
                        title: "message.mainpane.shoucangjia",
                        icon: "el-icon-star-off",
                        child: [
                            {
                                index: 1.1,
                                title: "message.mainpane.soujianxiang",
                                icon: "el-icon-folder-opened",
                                unread: 10
                            }, {
                                index: 1.2,
                                title: "message.mainpane.yifasong",
                                icon: "el-icon-top-right",

                            }, {
                                index: 1.3,
                                title: "message.mainpane.caogao",
                                icon: "el-icon-document-remove",
                                unread: 7
                            },
                        ]
                    }
                ]
            });
            const router = useRouter();
            const { proxy } = getCurrentInstance();

            onMounted(() => {
                console.log(proxy.$i18n);

                for (let i = 0; i < 100; i++) {
                    data.items[i] = { id: i, name: generateRandomName(), text: generateRandomMsg(), content: '**重要：系统即将重启', icon: require(`@/assets/${generateRandomIcon()}`), time: generateRandomTime(), unread: Math.floor(Math.random() * 2)};  
                }
                tagDrop();
            });

            onUpdated(() => {
                console.log("onUpdated");
            });

            const contextmenu = ref(null);

            function openMenu(e) {
                contextmenu.value.openMenu(e);
                console.log(contextmenu.value);
            }

            function handleCommand(command) {
                console.log(command);
                ElMessage.success(command);
            }

            function handleNewMail() {
                router.push({ path: "/home/mail/main/newmail" });
                data.loading = false;
            }

            const menus = ref(null);

            function tagDrop() {
                var menus = document.querySelectorAll(".hudejie ul");
                console.log(menus);
                menus.forEach(menu => {
                    Sortable.create(menu, {
                        draggable: 'li',
                        group: "menus",
                        animation: 300
                    })
                })
            }

            watch(() => data.asideOpen, () => {
                if (data.asideOpen) {
                    proxy.$nextTick(() => {
                        tagDrop();
                    }
                    );
                }

            })

            return {
                ...toRefs(data),
                openMenu,
                contextmenu,
                handleCommand,
                handleNewMail,
                menus
            }
        },
    }
</script>

<style lang="scss" scoped>
    .mailpane {
        -webkit-app-region: no-drag;
        height: 100%;
        background: #f6f6f7;

        .el-header {
            display: flex;
            flex-direction: row;
            font-size: 20px;
            color: #7c7e80;
            font-weight: 100;
            -webkit-app-region: drag;

            .toolbars-item {
                -webkit-app-region: no-drag;
                flex-grow: 0;
                flex-shrink: 0;
                flex-basis: auto;
                line-height: 32px;
                display: flex;
                align-items: center; 
                justify-content: center;
                border-radius: 5px;

                &:hover {
                    background: #f3f4f4;
                }
            }
        }


        .mailpane-list {
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;

            li {  
                list-style-type: none;
                border-radius: 10px;

                &:hover {
                    background: #e4e4e6;
                }

                .mailpane-list-item {
                    display: flex;
                    align-items: center; 
                    border-bottom: 1px solid #dee0e2;
                    margin: 5px 10px;

                    .mailpane-list-unread-tip {
                        :deep(.el-badge__content.is-fixed)  {
                            top: -10px;
                        }
                    }

                    .mailpane-list-icon {
                        height: 36px;
                        width: 36px;
                        border-radius: 18px;

                        margin-left: 10px;
                        margin-top: 12px;
                        margin-bottom: 12px;
                    }

                    .mailpane-item-right {
                        width: 100%;
                        margin-left: 10px;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        justify-content: flex-start;
                        align-items: flex-start;
                        align-content: flex-start;

                        h4 {
                            margin-block: 0;
                            font-weight: 500;
                            font-size: 14px;
                        }

                        .mailpane-list-tip {
                            display: flex;
                            width: 100%;
                            
                            h5 {
                                margin-block: 0;
                                font-weight: 400;
                                font-size: 12px;
                                color: #8c8d8f;
                            }

                            h5:first-child {
                                flex: 1;
                                text-align: left;
                                width: 120px;
                                white-space: nowrap; /* 禁止换行 */  
                                overflow: hidden; /* 隐藏溢出部分 */  
                                text-overflow: ellipsis; /* 显示省略号 */ 
                            }
                        }
                    }
                }

            }
        }
    }

    .mian .mail-item {
        border-bottom: 1px solid #F3F2F1;
        background-color: #FFFFFF;
        padding: 10px 10px;
    }

    .mian .mail-item .avatar {
        width: 40px;
        height: 40px;
        font-size: 30px;
        line-height: 65px;
        color: #409EFF;
    }

    .mian .mail-item:hover {
        background-color: #FAF9F8;
    }

    .active-item {
        background-color: #DEECF9;
    }

    .toolbars {
        text-align: right;
    }

    .toolbars i {
        height: 20px;
        font-size: 16px;
        font-weight: 100;
        margin-right: 5px;
        padding: 2px 2px;
    }

    .toolbars i:hover {
        background-color: #C7E0F4;
    }

    .content {
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        color: #989b9e;
    }

    .name {
        font-size: 16px;
        font-weight: bold;
        height: 20px;
    }

    .theme {
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: small;
    }

    .time {
        color: #989b9e;
        font-size: 8px;
    }

    .mian {
        width: 100%;
        height: 100%;
        background-color: #FAF9F8;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .mian .left {
        width: 265px;
        height: 100%;

    }

    .mailpane-aside {
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .el-header {
        background-color: #f6f6f7;
        color: #333;
        text-align: left;
        line-height: 50px;
        height: 50px;
        border-bottom: 1px solid #EDEBE9;
        padding: 0 5px;
    }

    .el-header i {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-right: 5px;
    }

    .el-header i:hover {
        background-color: #EDEBE9;
    }

    .el-aside {
        background-color: #F3F2F1;
        color: #333;
        text-align: left;
        /* line-height: 200px; */
        width: 215px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        height: calc(100vh - 80px);
        padding: 0 1px;
    }

    .el-submenu,
    .el-menu-item {
        background-color: #F3F2F1;
    }

    .el-menu-item.is-active {
        background: #C7E0F4;
        color: #005A9E;
        font-weight: 800;
    }

    .menuitem .menuitem_title {
        display: inline-block;
        width: 70px;
    }

    .sc-contextmenu__suffix {
        font-weight: 100;
    }

    .main-content {
        background: #FAF9F8;
        height: 100%;

        .main-content-scrollbar {
            height: 100%;
        }
        
    }
</style>